哈囉大家好!
今天要來試試看在前端發送Get Request來讀取存在資料庫中的users資訊,並且在發送的請求中附加Authorization Header。
那就馬上開始吧!
之前完成的登入功能,在發送請求並把使用者資訊儲存到資料庫後,後端會回傳給前端一個Session Token,前端會把這個Session token存到LocalStorage。
每次發送請求給後端時,我們必須把Session Token附在請求Header中。
現在我想要在add-new-records component(新增紀錄頁面)發送讀取所有使用者的請求!
使用者登入成功後,會切換到records component頁面。先檢查是否有成功登入,localStorage是否有儲存token,若沒有儲存成功,代表使用者登入失敗,應該導回login頁面:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-records',
templateUrl: './records.component.html',
styleUrl: './records.component.css',
})
export class RecordsComponent implements OnInit {
constructor(private route: Router) {}
ngOnInit(): void {
const token = localStorage.getItem('go_dutch_session_token');
if (!token) {
this.route.navigate(['/login']);
}
}
addNewRecord() {
this.route.navigate(['/add-new-record']);
}
}
之後在原本的ApiService中新增CreateAuthHeaders() function:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment.development';
import { TokenRequest } from '../interfaces/auth';
@Injectable({
providedIn: 'root',
})
export class ApiServiceService {
constructor(private http: HttpClient) {}
// 建立受HTTP保護的Header
private createAuthHeaders(): HttpHeaders {
const token = localStorage.getItem('go_dutch_session_token'); // 拿到token
if (token) {
// 將token附加到Authorization Header中
return new HttpHeaders({ Authorization: `Bearer ${token}` });
}
return new HttpHeaders(); // 沒有Token,回傳一個空header
}
(因為這個是小專案,所以我把所有的API都放在ApiService檔案中)
接著在同一個檔案中新增讀取所有使用者的getAllUsers() function:
getAllUsers() {
const headers = this.createAuthHeaders(); // 產生Authorization Header
const url = `${environment.apiBaseUrl}/Users/all-users`;
return this.http.get(url, { headers: headers });
}
完成API的設定後,就可以在add-new-record component的constructor中注入ApiService, 並呼叫getAllUsers() function來請求所有使用者的資料:
import { Component } from '@angular/core';
import { ApiServiceService } from '../../services/api-service.service';
@Component({
selector: 'app-add-new-record',
templateUrl: './add-new-record.component.html',
styleUrl: './add-new-record.component.css',
})
export class AddNewRecordComponent {
constructor(private apiService: ApiServiceService) {}
getAllUsers() {
this.apiService.getAllUsers().subscribe({
next: (response) => {
console.log(response);
// 處理回傳的使用者資訊
// ...
},
error: (err) => {
console.log(err.message);
},
});
}
}
同樣的格式,之後其他的API也可以比照辦理!
統一在ApiService中處理讓附加Header的任務變得比較簡單,需要修改時只需要修改ApiService中的CreateAUthHeader() function 即可~